<template>
  <div style="text-align: center">
    <el-transfer
      style="text-align: left; display: inline-block;"
      v-model="value"
      :render-content="renderFunc"
      :titles="['所有学生', '已选中学生']"
      :button-texts="['删除', '添加']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
      @change="handleChange"
      :data="data"
    ></el-transfer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据放这里
      data: [
        {
          key: "201830612345",
          label: "学生1"
        },
        {
          key: "20183062243",
          label: "学生2"
        },
        {
          key: "20183062203",
          label: "学生3"
        },
        {
          key: "201830622783",
          label: "学生4"
        },
        {
          key: "201830622768",
          label: "学生5"
        },
        {
          key: "20183062676",
          label: "学生6"
        },
        {
          key: "201830645373",
          label: "学生7"
        },
        {
          key: "20182124535434",
          label: "学生8"
        },
        {
          key: "2018344442",
          label: "学生9"
        },
        {
          key: "20187575757",
          label: "学生10"
        },
        {
          key: "201844343434",
          label: "学生11"
        },
        {
          key: "20185353535",
          label: "学生12"
        },
        {
          key: "201855323",
          label: "学生13"
        },
        {
          key: "2018324242424",
          label: "学生14"
        },
        {
          key: "2018777777",
          label: "学生15"
        },
        {
          key: "20184224242",
          label: "学生16"
        },
        {
          key: "2018342424",
          label: "学生17"
        },
        {
          key: "2018574545",
          label: "学生18"
        }
      ],
      value: [1],
      //这个是显示格式
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      }
    };
  },
  methods: {
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
    }
  }
};
</script>

<style lang="less" scoped>
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}

// 这个是改变外边框的宽高
/deep/ .el-transfer-panel {
  width: 270px;
  height: 350px;
}

//这个是用来改变显示内容的高度
/deep/ .el-transfer-panel__list {
  height: 350px;
}
</style>